<template>
    <div class="box">
        <div class="left">
            <div class="shadow">
                <div class="tool">
                    <span class="el-icon-rank"></span>
                    <span class="el-icon-delete-solid"></span>
                </div>
                <div class="number">1</div>
                <div class="content">
                    <p>{{title}}</p>
                    <div v-for="(item, index) in list" :key="index" class="item">
                        <div class="hover_box" @click="item.show = false">
                            <el-radio v-model="radio" label="1" v-show="item.show">{{item.text}}</el-radio>
                            <el-radio v-model="radio" label="1" v-show="!item.show">
                                <el-input
                                    type="textarea"
                                    autosize
                                    placeholder="请输入内容"
                                    v-model="item.text"
                                >
                                </el-input>
                            </el-radio>
                        </div>
                        <div class="item_tool" @click="delItem(index)">
                            <span class="el-icon-delete-solid"></span>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
                <div class="foot_tool">
                    <div @click="add"><span class="el-icon-plus"></span>添加单个选项</div>
                </div>
            </div>
        </div>
        <div class="right">222</div>
    </div>
</template>

<script>
export default {
  name: 'singlechoose',
  data() {
    return {
      title: '请选择一个选项',
      list: [
        {
          id: 1,
          text: '选项1',
          show: true,
        },
        {
          id: 2,
          text: '选项2',
          show: true,
        },
      ],
    };
  },
  methods: {
    add() {
      this.list.push({
        id: this.list[this.list.length - 1].id + 1,
        // text: '选项' + (this.list.length + 1),
        text: `选项${((this.list[this.list.length - 1].id) + 1)}`,
        show: true,
      });
    },
    delItem(index) {
      this.list.splice(index, 1);
    },
  },
};
</script>

<style scoped lang="scss">
.box{
    width: 100%;
    height: 100vh;
    background: #eee;
    .left{
        padding-top: 20px;
        width: 80%;
        height: 100%;
        float: left;
        .shadow{
            position: relative;
            width: 100%;
            .tool{
                position: absolute;
                top: 15px;
                right: 10px;
                color: #666;
                span{
                    font-size: 20px;
                    display: inline-block;
                    margin: 0 10px;
                }
            }
            .number{
                float: left;
                width: 12%;
                text-align: center;
                padding-top: 12px;
            }
            .content{
                float: left;
                width: 70%;
                p{
                    padding: 10px 0;
                }
                .item{
                    width: 100%;
                    position: relative;
                    .hover_box{
                        width: 80%;
                        padding: 8px 0;
                        border: 1px solid #fff;
                        padding-left: 5px;
                        /deep/textarea{
                            border: 0;
                            width: 100% !important;
                        }
                        /deep/.el-textarea__inner{
                            width: 100%;
                            padding: 10px 0;
                        }
                    }
                    .item_tool{
                        color: #666;
                        position: absolute;
                        right: 10%;
                        top: 0;
                        height: 35px;
                        line-height: 35px;
                        display: none;
                    }
                    &:hover{
                        .item_tool{
                            display: block;
                        }
                        .hover_box{
                            border: 1px dashed #eee;
                        }
                    }
                }
            }
            .foot_tool{
                padding: 10px 0 0 0;
                padding-left: 12%;
                color: #409EFF;
                span{
                    font-weight: bold;
                    margin:0 10px 0 0;
                }
            }
            &:after{
                clear:both;
                display: block;
                content: '';
            }
        }
    }
    .right{
        border-left: 1px solid #ccc;
        width: 18%;
        height: 100%;
        float: right;
    }
    &:after{
        clear: both;
        content: '';
        display: block;
    }
}
</style>
